<template>
    <div class="my-container">

        <!-- 登录状态 -->
        <van-cell-group class="user-info" v-if="user">
            <van-cell 
                center
                class="user-base"
                :border="false"
            >
                <van-image
                    class="avatar"
                    slot="icon"
                    :src="currentUser.photo"
                    round
                    fit="cover"
                />
                <div class="name" slot='title'>{{currentUser.name}}</div>
                <van-button
                    class="update-btn"
                    size="small"
                    round
                    to="/user/profile"
                >
                    编辑资料
                </van-button>
            </van-cell>

            <van-grid :border="false" class="date-info">

                <van-grid-item class="date-info-item">
                    <div slot="text" class="text-wrap">
                        <div class="count">{{currentUser.art_count}}</div>
                        <div class="text">头条</div>
                    </div>
                </van-grid-item>


                <van-grid-item class="date-info-item">
                    <div slot="text" class="text-wrap">
                        <div class="count">{{currentUser.follow_count}}</div>
                        <div class="text">关注</div>
                    </div>
                </van-grid-item>


                <van-grid-item class="date-info-item"> 
                    <div slot="text" class="text-wrap">
                        <div class="count">{{currentUser.fans_count}}</div>
                        <div class="text">粉丝</div>
                    </div>
                </van-grid-item>


                <van-grid-item class="date-info-item">
                    <div slot="text" class="text-wrap">
                        <div class="count">{{currentUser.like_count}}</div>
                        <div class="text">获赞</div>
                    </div>
                </van-grid-item>
            </van-grid>
        </van-cell-group>

        <!-- 未登录状态 -->
        <div v-else class="not-login">
            <div class="moblie" @click="$router.push('/login')">
                <img src="./img/手机.png" alt="">
            </div>
            <div class="text">
                登录/注册
            </div>
        </div>


        <van-grid :column-num="2" class="nav-grid mb-4">
            <van-grid-item icon="star-o" style="background:#fff;color:#eb5253;" text="收藏" class="nav-grid-item"/>
            <van-grid-item icon="browsing-history-o" style="background:#fff;color:orange;" class="nav-grid-item" text="历史" />
        </van-grid>

        <van-cell title="消息通知" is-link url="/vant/mobile.html" />
        <van-cell title="小智同学" class="mb-4" is-link to="/user/chat" />
        <van-cell title="退出登录" @click="onLayout()" class="logout-cell" v-if="user" />
    </div>
</template>
<script>

import { mapState } from 'vuex'
import { getCurrenUser } from '@/api/user'
export default {
    name:'myIndex',
    data() {
        return {
            currentUser:{}
        }
    },
    methods: {
        onLayout(){
            this.$dialog.confirm({
                title: '退出提示',
                message: '确认退出吗？',
            })
            .then(() => {
                this.$store.commit('setUser',null)
            })
            .catch(() => {
                // on cancel
            })
        },
        async loadCurrenUser(){
            const { data } = await getCurrenUser()
            this.currentUser = data.data
            //console.log(data)
        }
    },
    computed:{
        ...mapState(['user'])
    },
    created() {
        this.loadCurrenUser()
    },
}
</script>
<style lang="less" scoped>
    .user-info{
        background: url('./img/yue.jpg') no-repeat;
        background-size: cover;
        .user-base{
            background-color: unset;
            height: 115px;
            box-sizing: border-box;
            padding-bottom: 11px;
            padding-top: 38px;
        }
        .avatar{
            width: 66px;
            height: 66px;
            box-sizing: border-box;
            border:1px solid #fff;
            margin-right: 11px;
        }
        .name{
            font-size:15px;
            color: #fff;
        }
        .update-btn{
            height: 16px;
            font-size:10px;
            color:#666666;
        }
        .date-info{
            
            .date-info-item{
                height: 65px;
                .text-wrap{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    .count{
                        font-size: 18px;
                    }
                    .text{
                        font-size: 11px;
                    }
                }
            }
        }
    }
    /deep/.nav-grid{
        .nav-grid-item{
            height:70px;
        }
        .van-icon{
            .van-grid-item__icon{
                font-size: 22px;
            }
            .van-grid-item__text{
                font-size: 14px;
                color: #333333;
            }
        }
        
    }
    /deep/.van-grid-item__content{
        background-color: unset;
    }
    .logout-cell{
        text-align: center;
        color: #d86262;
    }
    .mb-4{
        margin-bottom: 4px;
    }
    .not-login{
        height: 180px;
        background: url('./img/yue.jpg');
        background-size:cover;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        
        .moblie{
            width: 66px;
            height: 66px;
            background: #fff;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            border-radius: 50%;
            margin-bottom:8px;
            img{
                width: 60%;
                height: 60%;
            }
        }
        .text{
            font-size:14px;
        }
    }
</style>